<template>
  <el-upload class="upload-demo" ref="upload" list-type="picture-card" :action="upload_url" :headers="upload_headers" :limit="1"
    :file-list="file_list" :on-success="upload_success" :before-upload="beforeUpload" >
    <i class="el-icon-plus"></i>
    <!-- <el-button slot="trigger" size="small" type="primary">选取文件</el-button> -->
    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过2MB</div>
  </el-upload>
</template>

<script>
  import {
    getUploadUrl
  } from '@/api/upload.js'
  import {
    getToken
  } from '@/utils/auth'
  export default {
    data() {
      return {
        upload_url: getUploadUrl(),
        upload_headers: {},
        file_list: [],
        suc_file_list: [],

      }
    },
    created() {

      this.upload_headers = {
        Authorization: getToken()
      }
    },
    methods: {
      upload_success(response, file, fileList) {
        console.log(response)
        console.log(file)
        console.log(fileList)
        this.suc_file_list.push(response.data)
        console.log(this.suc_file_list)
      },
      beforeUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;
      
        if (!isJPG && !isPNG) {
          this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
          return false;
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!');
          return false;
        }
        return true;
      },
      get_success_file_list() {
      
        return this.suc_file_list;
      }
    },
    
  }
</script>

<style>
  .upload-demo {
    width: 360px;
    margin: 10px 20px;
  }
</style>
